<template>
  <div>
    <!-- <div id="header">
      
    </div> -->
    <div id="header">
      <img src="/pic&video/headerLogo.png" style="width:100%" alt="" />
      <van-tabs
        v-model="active"
        background="none"
        title-active-color="white"
        line-width="0"
        title-inactive-color="gray"
      >
        <van-tab title="首页" to="/"></van-tab>
        <van-tab title="志愿者入口" to="/login"></van-tab>
        <van-tab title="官方发布" to="/news"></van-tab>
        <van-tab title="三大赛区" to="/area"></van-tab>
        <van-tab title="项目介绍" to="/introduce"></van-tab>
        <van-tab title="冬奥百科" to="/"></van-tab>
        <van-tab title="关于我们" to="/endpage"></van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<style>
#header {
  background: url("/pic&video/logoBackground.jpg") no-repeat top center/100%;
  padding: 5px;
}
img {
  width: 100%;
}
</style>

<script>
export default {
  data() {
    return {
      active: 0,
    }
  },
  watch: {
    $route(to, from) {
      if (to.name == "Index") {
        this.active = 0
      }
         if (to.name == "Login"||to.name == "Mine") {
        this.active = 1
      }
         if (to.name == "News") {
        this.active = 2
      }
    },
  },
}
</script>
